<template>
    <div class="flex-col">
        <!-- 查询条件 -->
        <div class="panel _body page-top">
            <el-form label-width="6em">
                <el-row>
                    <!-- TIP 整行的 span（占位） + offset（前方留白） 总和应该是 24 -->
                    <!-- 靠左的按钮 -->
                    <el-col :span="6"
                            class="page-top-btns">
                        <el-form-item label-width="0">
                            <el-button type="success"
                                       @click="fBtnClick('add')">新增</el-button>
                        </el-form-item>
                    </el-col>
                    <!-- 查询条件 -->
                    <el-col :span="6"
                            :offset="10">
                        <el-form-item label="区域名称">
                            <el-input v-model="oFilterForm.qymc"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 搜索按钮组-->
                    <el-col :span="2"
                            class="page-top-btns _right">
                        <el-form-item label-width="0">
                            <el-button icon="el-icon-search"
                                       @click="fBtnClick('search')"></el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 分页列表 -->
        <div class="panel _body flex1 flex-col">
            <!-- 表格 -->
            <div class="flex1">
                <el-table :data="aTable"
                          height="100%"
                          stripe>
                    <el-table-column label="序号"
                                     type="index"
                                     :index="nStartno"
                                     align="center"
                                     width="80">
                    </el-table-column>
                    <el-table-column property="name"
                                     label="名称"
                                     align="center">
                    </el-table-column>
                    <el-table-column property="des"
                                     label="描述"
                                     align="center">
                    </el-table-column>
                    <el-table-column property="zdlx"
                                     label="站点类型"
                                     align="center">
                    </el-table-column>
                    <el-table-column property="rkzd"
                                     label="入口站点"
                                     align="center">
                    </el-table-column>
                    <el-table-column property="ckzd"
                                     label="出口站点"
                                     align="center">
                    </el-table-column>
                    <el-table-column label="操作"
                                     align="center"
                                     width="200">
                        <template v-slot="oRow">
                            <el-button @click="fTableBtnClick('view', oRow.row)">查看</el-button>
                            <el-button @click="fTableBtnClick('edit', oRow.row)">修改</el-button>
                            <el-button plain
                                       icon="el-icon-delete"
                                       type="danger"
                                       @click="fTableBtnClick('delete', oRow.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页条 -->
            <wiv-pagebar ref="pagebar"
                         @after-flip="fAfterFlip"></wiv-pagebar>
        </div>

        <!--弹框-->
        <wiv-dialog :visible.sync="bShowDetail"
                    width="70%"
                    height="80%"
                    title="详情弹框">
            <!-- 
                :visible.sync 的值需要与 wiv-dialog 上的 :visible.sync 值一致
                其他属性则根据业务需要修改
             -->
            <sub-detail :visible.sync="bShowDetail"
                        :detail="oCurRow"
                        :is-view="bIsView"
                        @data-change="fDetailDataChange" />
        </wiv-dialog>
    </div>
</template>

<script>
    //引入对应业务模块菜单目录的 URLS
    import { URLS_DEMO } from '@/urls.js';
    //当前页面引入的子组件，以 Sub 为前缀，文件放在当前文件同级同名文件夹中
    import SubDetail from './list/detail.vue';//详情弹框

    export default {
        components: {
            SubDetail
        },
        data() {
            return {
                nStartno: 0, //当前页数据的开始序号（从1开始）
                aTable: [], //表格数据
                oCurRow: null, //表格选中行
                oFilterForm: {}, //过滤条件
                bShowDetail: false, //弹框是否显示
                bIsView: false, //详情是否为查看状态，查看时，表单内容不可编辑
            };
        },
        mounted() {
            this.fResetList();//请求列表数据
        },
        methods: {
            fDetailDataChange() {//弹框中数据发生变化，如：新增、修改的保存操作
                this.fResetList();
            },
            fBtnClick(sType) { //页面按钮点击事件
                //console.log(sType);
                switch (sType) {
                    case 'add':  //新增
                        this.oCurRow = undefined;
                        this.bShowDetail = true;
                        this.bIsView = false;
                        break;
                    case 'search':  //查询
                        this.fResetList();
                        break;
                }
            },
            fTableBtnClick(sType, oRow) { //表格按钮点击事件
                //console.log(sType, oRow);
                switch (sType) {
                    case 'view':  //查看
                        this.oCurRow = oRow;
                        this.bShowDetail = true;
                        this.bIsView = true;
                        break;
                    case 'edit':  //修改
                        this.oCurRow = oRow;
                        this.bShowDetail = true;
                        this.bIsView = false;
                        break;
                    case 'delete':  //删除
                        this.$WIV.fShowConfirm('确定删除吗?')
                            .then(() => {
                                this.$WIV.fRequest({
                                    url: URLS_DEMO.d_delete,
                                    data: {
                                        id: oRow.id,
                                    }
                                }).then(() => {
                                    this.$WIV.fShowMsg('删除成功!', {
                                        type: 'success'
                                    });
                                    this.fResetList();//删除后刷新列表
                                });
                            });
                        break;
                }
            },
            fAfterFlip(aData, oPageApi) { //分页组件回调
                this.aTable = aData;
                this.nStartno = oPageApi.startno;
            },
            fResetList() { //请求表格数据
                this.$refs.pagebar.fReset({
                    url: URLS_DEMO.d_pagelist,
                    args: {
                        qymc: this.oFilterForm.qymc
                    }
                });
            }
        }
    };
</script>
